<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@next"></script>

</head>

<body>
  <div id="app">
    <!-- <kfc>
      <template v-slot:ft>55555</template>
      123456
      <template v-slot:pp>77777</template>

    </kfc> -->

    <!-- <asd>
      <template v-slot:default="k">
        {{k}}
      </template>
    </asd> -->

    <transition name="v">
      <div v-if="showmsg">{{msg}}</div>

    </transition>


    <button @click="showmsg=!showmsg">我是按钮</button>

  </div>



</body>
<script>
  const app = Vue.createApp({
    data() {
      return {
        msg: 'hi girl',
        showmsg: true
      }
    }
  })
  // app.component('kfc', {
  //   template: `<h1>
  //     我是kfc组件
  //     <slot></slot>
  //     <h1>分割线啊</h1>
  //     <slot name="ft"></slot>
  //     <h1>分割线</h1>
  //     <slot name="pp"></slot>
  //     {{user.name}}
  //     <slot></slot>
  //   </h1>`,
  //   data() {
  //     return {
  //       user: {
  //         name: 'hi girl'
  //       }
  //     }
  //   }
  // })



  // app.component('asd', {
  //   template: `
  //         <h1>
  //           {{user.name}}
  //           <hr>
  //           <slot :asd="'555'" :efg="3333"></slot>
  //         </h1>`,
  //   data() {
  //     return {
  //       user: {
  //         name: 'hi man'
  //       }
  //     }
  //   }
  // })
  app.mount('#app')
</script>

<style>
  .v-enter {
    background-color: orange;
  }

  .v-enter-active {
    background-color: paleturquoise;
    transition: background-color 5s;
  }

  .v-enter-to {
    background-color: pink;
  }
</style>

</html>